<template>
  <div class="container">
    <div ref="_width" style="width: 1200px"></div>
    <div ref="_margin" style="width: 0.3rem"></div>
    <div ref="list">
      <div
        :style="'width:' + item_width + 'px'"
        v-for="(item, index) in list"
        :key="index"
        @click="
          $router.push({
            path: '/teacher/detail',
            query: {
              id: item.id
            }
          })
        "
      >
        <img :src="item.image" alt />
        <div class="content">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="mask left"></div>
    <div class="mask right"></div>
    <i class="el-icon-arrow-left" @click="scroll(false)"></i>
    <i class="el-icon-arrow-right" @click="scroll(true)"></i>
  </div>
</template>

<script>
let clicks = true;
let item_num = 4;
if (document.body.clientWidth * 2 < 1024) {
  item_num = 2;
}

export default {
  props: ["list", "num"],
  data() {
    return {
      left: 0,
      minLength: 0,
      item_width: 0,
      _margin: 0,
      max_times: 0,
      now_times: 0
    };
  },
  methods: {
    scroll(e) {
      let _this = this;
      _this.max_times = Math.ceil(_this.list.length / item_num);
      if (clicks) {
        clicks = false;
        if (!e && _this.now_times > 0) {
          _this.now_times--;
          if (document.body.clientWidth * 2 < 1024) {
            _this.$refs.list.style.left =
              _this.$refs.list.offsetLeft + _this.item_width + "px";
          } else {
            _this.$refs.list.style.left =
              _this.$refs.list.offsetLeft +
              (_this.item_width + _this._margin) * item_num +
              "px";
          }
        } else if (e && _this.now_times < _this.max_times) {
          if (document.body.clientWidth * 2 > 1024) {
            return;
          }
          _this.now_times++;
          if (document.body.clientWidth * 2 < 1024) {
            _this.$refs.list.style.left =
              _this.$refs.list.offsetLeft - _this.item_width + "px";
          } else {
            _this.$refs.list.style.left =
              _this.$refs.list.offsetLeft -
              (_this.item_width + _this._margin) * item_num +
              "px";
          }
        }
        setTimeout(() => {
          clicks = true;
        }, 400);
      }
    }
  },
  mounted() {
    let _this = this;
    _this.minLength = _this.$refs.list.offsetLeft;
    let _width = _this.$refs._width.offsetWidth;
    let _margin = _this.$refs._margin.offsetWidth;
    _this._margin = _margin;
    if (_this.num) {
      item_num = _this.num;
    }
    let item_width = (_width + _margin) / item_num - _margin;
    _this.item_width = item_width;
    if (document.body.clientWidth * 2 < 500) {
      _this.item_width = document.body.clientWidth;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 3rem;
  overflow-x: hidden;
  display: -webkit-box;
  position: relative;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    height: 4rem;
  }
  > div {
    height: 100%;
    display: flex;
    position: absolute;
    left: @side-width;
    transition: all 300ms;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      left: 0;
    }
    > div {
      width: @item-width;
      height: 100%;
      margin-right: 0.3rem;
      position: relative;
      cursor: pointer;
      transition: all 300ms;
      opacity: 0.8;
      @media only screen and (max-width: 500px),
        only screen and (max-device-width: 500px) {
        margin-right: 0;
      }
      > img {
        width: 100%;
        height: 60%;
        object-fit: cover;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(40% - 0.3rem);
        transition: all 300ms;
        @media only screen and (max-width: 500px),
          only screen and (max-device-width: 500px) {
          height: 100%;
          bottom: 0;
        }
      }
      .content {
        width: 100%;
        // height: 20%;
        box-sizing: border-box;
        padding-top: 0.1rem;
        padding-bottom: 0.2rem;
        overflow: hidden;
        // display: flex;
        // flex-direction: column;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: calc(60% + 0.3rem);
        transition: all 300ms;
        @media only screen and (max-width: 500px),
          only screen and (max-device-width: 500px) {
          top: auto;
          bottom: 0;
          padding: 0;
        }
        > span {
          color: @node-color;
          @media only screen and (max-width: 500px),
            only screen and (max-device-width: 500px) {
            margin-left: 0.65rem;
          }
        }
        > div {
          font-size: @small-size;
          color: black;
          margin-top: 0.1rem;
          transition: all 300ms;
          box-sizing: border-box;
        }
      }
    }
    > div:hover {
      opacity: 1;
      > img {
        width: calc(100% + 0.6rem);
        height: calc(80% + 0.3rem);
      }
      > div {
        width: calc(100% + 0.6rem);
      }
      .content {
        background: @dark-color;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
      }
    }
  }
  .mask {
    width: calc(@side-width - 0.3rem);
    background: black;
  }
  .mask.left {
    left: 0;
  }
  .mask.right {
    left: calc(@side-width + @width + 0.3rem);
  }
  > i {
    width: 0.5rem;
    height: 0.5rem;
    background: #272c33;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.25rem;
    color: @node-color;
    position: absolute;
    top: calc(30% + 0.05rem);
    cursor: pointer;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      top: 50%;
    }
  }
  > i:hover {
    background: @dark-color;
  }
  .el-icon-arrow-left {
    left: calc((100% - @width) / 2);
    transform: translateX(-50%);
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      left: 0.6rem;
      transform: translateY(-50%);
    }
  }
  .el-icon-arrow-right {
    right: calc((100% - @width) / 2);
    transform: translateX(50%);
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      right: 0.6rem;
      transform: translateY(-50%);
    }
  }
}
</style>